import React, { useState, useCallback } from 'react';
import styles from './index.module.less';

export interface RadioOption<T = any> {
    label: string | React.ReactNode;
    value: T;
    disabled?: boolean;
    [key: string]: any; // 允许额外属性
}

export interface CustomRadioGroupProps<T = any> {
    /** 选项数组 */
    options: RadioOption<T>[];
    /** 选中的值 */
    value?: T;
    /** 默认值 */
    defaultValue?: T;
    /** 值变化回调 */
    onChange?: (value: T) => void;
    /** 自定义渲染选项内容的函数 */
    renderOption?: (option: RadioOption<T>, isChecked: boolean) => React.ReactNode;
    /** 自定义类名 */
    className?: string;
    /** 是否禁用 */
    disabled?: boolean;
    /** 自定义样式 */
    style?: React.CSSProperties;
    /** 名称，用于表单 */
    name?: string;
    /** 布局方向：vertical(垂直) 或 horizontal(水平) */
    layout?: 'vertical' | 'horizontal';
    /** 是否使用卡片样式 */
    card?: boolean;
}

const CustomRadioGroup = <T extends any = any>({
    options,
    value: controlledValue,
    defaultValue,
    onChange,
    renderOption,
    className,
    disabled: groupDisabled = false,
    style,
    name,
    layout = 'vertical',
    card = false,
}: CustomRadioGroupProps<T>) => {
    const [internalValue, setInternalValue] = useState<T | undefined>(defaultValue);
    
    // 受控或非受控模式：如果 value 不为 undefined，则为受控模式（包括 null）
    const isControlled = controlledValue !== undefined;
    const currentValue = isControlled ? controlledValue : internalValue;

    const handleChange = useCallback((optionValue: T) => {
        if (!isControlled) {
            setInternalValue(optionValue);
        }
        onChange?.(optionValue);
    }, [isControlled, onChange]);

    return (
        <div 
            className={`${styles.customRadioGroup} ${layout === 'horizontal' ? styles.horizontal : ''} ${className || ''}`}
            style={style}
            role="radiogroup"
        >
            {options.map((option, index) => {
                const isChecked = currentValue === option.value;
                const isDisabled = groupDisabled || option.disabled;
                const optionId = `${name || 'radio'}-${index}`;

                return (
                    <label
                        key={index}
                        className={`${styles.customRadioItem} ${isChecked ? styles.checked : ''} ${isDisabled ? styles.disabled : ''} ${card ? styles.card : ''}`}
                        onClick={() => !isDisabled && handleChange(option.value)}
                    >
                        <input
                            type="radio"
                            name={name}
                            value={String(option.value)}
                            checked={isChecked}
                            disabled={isDisabled}
                            onChange={() => {}} // 由 label 的 onClick 处理
                            className={styles.radioInput}
                            id={optionId}
                        />
                        <span className={styles.radioIndicator}>
                            <span className={styles.radioDot} />
                        </span>
                        <span className={styles.radioContent}>
                            {renderOption ? renderOption(option, isChecked) : option.label}
                        </span>
                    </label>
                );
            })}
        </div>
    );
};

// 为了兼容 Antd Form，创建一个包装组件
export const CustomRadioGroupWithForm = <T extends any = any>(
    props: CustomRadioGroupProps<T> & { 
        /** 用于 Antd Form.Item 的值变化事件 */
        onBlur?: () => void;
    }
) => {
    const { onBlur, ...restProps } = props;
    return <CustomRadioGroup {...restProps} />;
};

export default CustomRadioGroup;

